<template>
	<view class="login-container">
		<!-- 渐变背景 -->
		<view class="background-gradient"></view>

		<!-- 登录卡片 -->
		<view class="login-card">
			<!-- Logo -->
			<image src="https://example.com/deepseek-logo.png" class="logo" mode="aspectFit" />

			<!-- 登录方式切换 -->
			<view class="tab-container">
				<text :class="['tab-item', { 'active': loginType === 'account' }]" @click="loginType = 'account'">
					账号登录
				</text>
				<text :class="['tab-item', { 'active': loginType === 'code' }]" @click="loginType = 'code'">
					验证码登录
				</text>
			</view>

			<!-- 账号登录表单 -->
			<template v-if="loginType === 'account'">
				<view class="input-group">
					<uni-icons type="person" size="20" color="#666"></uni-icons>
					<input v-model="accountForm.username" class="input" type="text" placeholder="请输入账号"
						placeholder-style="color: #999" />
				</view>

				<view class="input-group">
					<uni-icons type="locked" size="20" color="#666"></uni-icons>
					<input v-model="accountForm.password" class="input" type="password" placeholder="请输入密码"
						placeholder-style="color: #999" />
				</view>
			</template>

			<!-- 验证码登录表单 -->
			<template v-else>
				<view class="input-group">
					<uni-icons type="phone" size="20" color="#666"></uni-icons>
					<input v-model="codeForm.phone" class="input" type="number" placeholder="请输入手机号"
						placeholder-style="color: #999" />
				</view>

				<view class="input-group code-input">
					<uni-icons type="message" size="20" color="#666"></uni-icons>
					<input v-model="codeForm.code" class="input" type="number" placeholder="请输入验证码"
						placeholder-style="color: #999" />
					<text class="code-btn" :class="{ 'disabled': !canGetCode }" @click="getCode">
						{{ codeBtnText }}
					</text>
				</view>
			</template>

			<!-- 登录按钮 -->
			<button class="login-btn" :class="{ 'disabled': !formValid }" :disabled="!formValid" @click="handleLogin">
				登录
			</button>

			<!-- 底部链接 -->
			<view class="footer-links">
				<text class="link-text">注册账号</text>
				<text class="link-text">忘记密码？</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import hooks from '@/hooks';
	// 登录类型
	const loginType = ref('account')

	// 账号登录表单
	const accountForm = ref({
		username: '',
		password: ''
	})

	// 验证码登录表单
	const codeForm = ref({
		phone: '',
		code: ''
	})

	// 验证码倒计时
	const {
		countdown,
		startCountdown,
		isCounting
	} = hooks.useCountdown(60)

	// 计算属性
	const formValid = computed(() => {
		if (loginType.value === 'account') {
			return accountForm.value.username && accountForm.value.password
		} else {
			return codeForm.value.phone && codeForm.value.code
		}
	})

	const canGetCode = computed(() => {
		return codeForm.value.phone && !isCounting.value
	})

	const codeBtnText = computed(() => {
		return isCounting.value ? `${countdown.value}s后重新获取` : '获取验证码'
	})

	// 方法
	const getCode = () => {
		if (!canGetCode.value) return
		startCountdown()
	}

	const handleLogin = () => {
		if (!formValid.value) return
		uni.showLoading({
			title: '登录中...'
		})
		setTimeout(() => {
			uni.hideLoading()
			uni.showToast({
				title: '登录成功'
			})
			uni.reLaunch({
				url: '/pages/home/index'
			})
		}, 1500)
	}
</script>

<style lang="scss" scoped>
	.login-container {
		position: relative;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		overflow: hidden;
	}

	.background-gradient {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, #0a6cff, #00c6ff);
		z-index: -1;
	}

	.login-card {
		width: 90%;
		max-width: 400px;
		background: #fff;
		border-radius: 16px;
		padding: 40rpx;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
		text-align: center;
	}

	.logo {
		width: 120px;
		height: 120px;
		margin-bottom: 30px;
	}

	.tab-container {
		display: flex;
		justify-content: center;
		margin-bottom: 30px;

		.tab-item {
			margin: 0 20px;
			font-size: 16px;
			color: #666;
			cursor: pointer;
			transition: color 0.3s;

			&.active {
				color: #0a6cff;
				font-weight: bold;
				border-bottom: 2px solid #0a6cff;
			}
		}
	}

	.input-group {
		display: flex;
		align-items: center;
		height: 50px;
		border-bottom: 1px solid #eee;
		margin-bottom: 20px;

		.input {
			flex: 1;
			height: 100%;
			margin-left: 10px;
			font-size: 14px;
		}
	}

	.code-input {
		.input {
			flex: 0.7;
		}

		.code-btn {
			flex: 0.3;
			text-align: center;
			color: #0a6cff;
			font-size: 14px;
			cursor: pointer;

			&.disabled {
				color: #ccc;
				cursor: not-allowed;
			}
		}
	}

	.login-btn {
		width: 100%;
		height: 50px;
		line-height: 50px;
		background: #0a6cff;
		color: #fff;
		border-radius: 25px;
		font-size: 16px;
		margin-top: 30px;
		transition: opacity 0.3s;

		&.disabled {
			background: #ccc;
			opacity: 0.7;
		}
	}

	.footer-links {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;

		.link-text {
			color: #0a6cff;
			font-size: 14px;
			cursor: pointer;
		}
	}
</style>